<template>
  <div>
    <div class="flex items-center">
      <!-- <span>版本列表</span> -->
      <this-search ref="search" @on-search="fetch(1)" @on-add="onAdd" />
    </div>
    <el-table
      :height="tableHeight"
      class="mt-2"
      stripe
      v-loading="loading"
      :data="rows"
    >
      <!-- <el-table-column prop="id" label="ID" width="180"> </el-table-column> -->

      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="displayName" label="昵称"> </el-table-column>
      <el-table-column prop="name" label="用户名"> </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="uid" label="用户ID"> </el-table-column>
      <el-table-column prop="portrait" label="头像">
        <template slot-scope="{ row }">
          <img :src="row.portrait" class="w-8 h-8 rounded-full" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="{ row }">
          {{ row.createTime | time2str }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="160">
        <template slot-scope="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link"> 更多 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="viewMsg(row)"
                >查看消息</el-dropdown-item
              >
              <el-dropdown-item @click.native="onEdit(row)"
                >修改</el-dropdown-item
              >
              <el-dropdown-item @click.native="sendMsg(row)"
                >消息</el-dropdown-item
              >
              <el-dropdown-item @click.native="onBand(row)"
                >{{ row.userStatus === 0 ? "封禁" : "解封" }}
              </el-dropdown-item>
              <el-dropdown-item @click.native="onDel({ userId: row.uid })"
                >销毁</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <the-page ref="page" @change="fetch" />
    <this-edit ref="edit" @edited="fetch" />
    <this-add ref="add" @added="fetch" />
    <this-msg ref="msg" />
  </div>
</template>

<script>
import rowsCurl from "@/mixins/rows-curl";
import thisEdit from "./edit.vue";
import thisAdd from "./add.vue";
import thisMsg from "./msg.vue";
import thePage from "@/components/page.vue";
import thisSearch from "./search.vue";

export default {
  components: { thisEdit, thisAdd, thisSearch, thePage, thisMsg },
  mixins: [rowsCurl],
  data() {
    return {
      uri: {
        list: "user/list",
        del: "/user/destroyUser",
      },
    };
  },
  computed: {},
  methods: {
    onBand(row) {
      const status = row.userStatus === 0 ? 2 : 0;
      this.axios
        .post("/user/updateUserStatus", {
          status,
          userId: row.uid,
        })
        .then((res) => {
          if (res.retCode != 0) {
            return this.$message.error(res.retMsg);
          }
          this.fetch(1);
          this.$message.success("操作成功!");
          // this.loading = false;
        });
    },

    sendMsg(row) {
      this.$refs.msg.open(row);
    },
    viewMsg(row) {
      this.$router.push({
        path: "/message/user",
        query: { uid: row.uid, name: row.name },
      });
    },
  },
};
</script>

<style>
</style>